<template>
  <div class="page-card user-manage">
    <PageHeader title="用户管理" @add-click="openDrawer" />
    <div class="page-card-body" flex-1 w-full>
      <PageTableBox>
        <template #table>
          <el-table :data="tableData" style="width: 100%" height="100%">
            <el-table-column fixed prop="nickName" label="用户昵称" />
            <el-table-column prop="acc" label="用户账号" />
            <el-table-column prop="pwd" label="用户密码" />
            <el-table-column prop="role" label="用户权限" />
            <el-table-column fixed="right" label="操作" width="160">
              <template #default="scope">
                <el-space>
                  <el-button type="primary" size="small" @click="openDrawer('编辑', scope.row)">编辑</el-button>
                  <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </PageTableBox>
    </div>
    <FormUser ref="formUser" @submit-btn="closeDrawer" />
  </div>
</template>

<script setup lang="ts">
import PageHeader from "../components/PageHeader.vue";
import PageTableBox from "../components/PageTableBox.vue";
import { ref } from "vue";
import FormUser from "./components/FormUser.vue";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";
import { ElMessage, ElMessageBox } from "element-plus";

const tableData = ref([
  {
    id: 1,
    nickName: "超级管理员",
    acc: "admin",
    pwd: "123456",
    role: "admin"
  },
  {
    id: 2,
    nickName: "普通用户",
    acc: "user",
    pwd: "123456",
    role: "user"
  }
]);
const formUser = ref<InstanceType<typeof FormUser> | null>(null);
const openDrawer = (title?: string, row?: any) => {
  formUser.value?.acceptParams({
    title: title || "新增",
    row: row || {},
    isView: false
  });
};
const closeDrawer = (e: any) => {
  showFullScreenLoading();
  setTimeout(() => {
    if (e.id) {
      tableData.value.forEach((item: any) => {
        if (item.id === e.id) {
          item = e;
        }
      });
    } else {
      e.id = tableData.value.length + 1;
      tableData.value.push(e);
    }
  }, 1000);
  tryHideFullScreenLoading();
  ElMessage.success("操作成功");
};

const del = (row: any) => {
  ElMessageBox.confirm("确定删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    showFullScreenLoading();
    setTimeout(() => {
      tableData.value = tableData.value.filter((item: any) => item.id !== row.id);
    }, 1000);
    tryHideFullScreenLoading();
    ElMessage.success("操作成功");
  });
};
</script>

<style scoped lang="scss">
.user-manage {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
</style>
